<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Stu Nicholls | CSSplay | CSS scrolling tables</title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, table, scrolling, information, cells">
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS">
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="imagetoolbar" content="no">


<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels">
<meta http-equiv="pics-Label" content="(pics-1.1 &quot;http://www.icra.org/pics/vocabularyv03/&quot; l gen true for &quot;http://cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for &quot;http://www.cssplay.co.uk&quot; r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml">
<link rel="shortcut icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/x-icon">
<link rel="icon" href="http://www.cssplay.co.uk/favicon.ico" type="image/ico">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<link rel="stylesheet" media="all" type="text/css" href="tablescroll_files/default.css">

<style type="text/css">
#info {padding-bottom:100px;}


.outer {
position:relative;
padding:4em 0 3em 0;
width:54em;
background:#eee;
margin:0 auto 3em auto;
}
.innera {
overflow:auto;
width:54em;
height:9.6em;
background:#eee;
}
.outer table caption {
position:absolute;
width:51.7em;
text-align:center;
top:0;
left:0;
height:1.5em;
background:#697210;
border:0.1em solid #fff;
color:#fff;
}
.outer thead tr {
position:absolute;
top:1.5em;
height:1.5em;
left:0;
}
.outer tfoot td {
position:absolute;
width:51.5em;
text-align:center;
background:#f0c992; 
border:0.1em solid #000;
color:#000;
bottom:0;
left:0
}
.outer th, .outer td {
width:10em; 
text-align:left;
}
.outer th {
background:#724a10; 
color:#fff;}
.outer .dk {background:#fff;
}

.tableone {width:650px; border-collapse:collapse; margin:0 auto;}
.tabletwo {width:620px; border-collapse:collapse;}
.th1 {width:149px;}
.th2 {width:99px;}
.th3 {width:99px;}
.th4 {width:99px;}
.th5 {width:200px;}

.td1 {width:149px;}
.td2 {width:99px;}
.td3 {width:99px;}
.td4 {width:99px;}
.td5 {width:170px;}

.tableone {background:#697210; border:1px solid #fff; color:#fff;}
.tableone td {border:1px solid #fff; color:#fff;}
.tableone tbody {background:#f0c992; color:#000;}
.tableone caption {background:#fff; color:#697210; font-size:1.2em; margin:0 auto;}
.tabletwo td {background:#eee; color:#000;}
.tableone th, .tabletwo th {text-align:left;}
.tabletwo tr.dk td {background:#ddd; color:#000;}

.innerb {height:10em; overflow:auto;}


</style>


</head><body id="www-cssplay-co-uk">
	<div id="wrapper">
	<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
		<div id="topad">
	<img src="tablescroll_files/468x60.gif" alt="">
	<img src="tablescroll_files/shadow_logo.png" alt="">
	<img src="tablescroll_files/468x60.gif" alt="">
	</div>
		<div id="header">
		<div id="logo">
		
			<h1><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page">CSS</a></h1>
			<h2><a accesskey="1" href="http://www.cssplay.co.uk/index" title="Home Page"><i>p</i>lay</a></h2>
			<h3>Experiments with Cascading Style Sheets</h3>
			</div> <!-- end of logo -->
			<div id="toplink">
			<ul>
			<li><a accesskey="W" href="http://www.cssplay.com/" title="cssplay.com forum">NEW! FORUM</a></li>
			<li><a accesskey="H" href="http://www.cssplay.co.uk/service" title="Help and Services">HELP &amp; ASSISTANCE</a></li>
			<li><a accesskey="Q" href="http://www.cssplay.co.uk/faqs" title="Frequently Asked Questions">FAQs</a></li>
			<li><a accesskey="N" href="http://www.cssplay.co.uk/w3c/contact" title="Contact us">CONTACT ME</a></li><li><a accesskey="V" href="http://www.cssplay.co.uk/w3c/privacy" title="Privacy Policy">PRIVACY POLICY</a></li>			<li><a accesskey="S" href="http://www.cssplay.co.uk/sitemap" title="Site map">SITE MAP</a></li>
			<li><a accesskey="K" href="http://www.cssplay.co.uk/accesskeys" title="Accesskeys">ACCESSKEYS</a></li>
			<li><a accesskey="P" href="http://www.cssplay.co.uk/support" title="Support">SUPPORT</a></li>
						<li><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="tablescroll_files/rss.png" alt="rss feed" title="RSS2.0 feed"></a></li>

			</ul>
			</div>
			<div id="midlink">
			<ul id="main_menu">
			<li class="demos"><a class="chosen" accesskey="T" href="http://www.cssplay.co.uk/menu/">Demos</a></li><li class="menus"><a accesskey="M" href="http://www.cssplay.co.uk/menus/">Menus</a></li><li class="layouts"><a accesskey="Y" href="http://www.cssplay.co.uk/layouts/">Layouts</a></li><li class="boxes"><a accesskey="B" href="http://www.cssplay.co.uk/boxes/">Boxes</a></li><li class="mozilla"><a accesskey="Z" href="http://www.cssplay.co.uk/mozilla/">Mozilla</a></li><li class="explorer"><a accesskey="E" href="http://www.cssplay.co.uk/ie/">Explorer</a></li><li class="opacity"><a accesskey="O" href="http://www.cssplay.co.uk/opacity/">Opacity</a></li>			<li class="java"><a accesskey="J" href="http://www.stunicholls.com/" title="Over to http://www.stunicholls.com">Javascript</a></li>
			</ul>
			</div>
			<div id="botlink">
			<ul id="sub_menu">

			<li><a accesskey="H" href="http://www.cssplay.co.uk/index">HOME</a></li>
			<li><a href="http://www.cssplay.co.uk/menu/index.html" accesskey="F" title="First - Section List">LIST</a></li><li><a href="http://www.cssplay.co.uk/menu/hover_click.html" accesskey="P" title="Previous">PREVIOUS</a></li><li><a href="http://www.cssplay.co.uk/menu/fade_scroll.html" accesskey="N" title="Next">NEXT</a></li><li><a href="http://www.cssplay.co.uk/menu/conditional.html" accesskey="L" title="Last">LAST</a></li>			<li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=scrolling%20table" accesskey="C" title="Comments for this page">COMMENTS</a></li>
			<li>TUTORIAL</li>			</ul>
			</div> <!-- end of botlink -->
		<div id="search">
<div class="cse-branding-right" style="background-color: transparent; color: rgb(0, 0, 0);">
  <div class="cse-branding-form">
    <form action="http://www.cssplay.co.uk/search.html" id="cse-search-box">
      <div>
        <input name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" type="hidden">
        <input name="cof" value="FORID:10" type="hidden">
        <input name="ie" value="UTF-8" type="hidden">
        <input name="q" size="19" class="search" type="text">
        <input name="sa" value=" Search" type="submit">
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="tablescroll_files/poweredby_AAAAAA.gif" alt="Google">
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>
		</div> <!-- end of search -->

		</div> <!-- end of header -->

<div id="info">

<h2>Vertical scrolling tables</h2>
<p class="bold info">Method #1</p>
<div class="outer">
<div class="innera">
    <table summary="This table lists flights arriving at Bristol International Airport.">
      <caption>ARRIVALS TO BRISTOL - ENGLAND</caption>
      <thead>
        <tr>
          <th scope="col">FLIGHT CODE</th> 
          <th scope="col">FROM</th> 
          <th scope="col">STA</th> 
          <th scope="col">ETA</th> 
          <th scope="col" class="nd">Notes</th> 
        </tr>
      </thead>

      <tfoot>
        <tr>
          <td colspan="5">DATE : 19th OCTOBER 2005</td>
        </tr>
      </tfoot>

      <tbody>
      <tr>
        <th scope="row">T3 4264</th>
        <td>ISLE OF MAN</td>
        <td>11:40</td>
        <td>11:42</td>
        <td>LANDED AT 11:43</td>
      </tr>

      <tr class="dk">
        <th scope="row">BA 4081</th>
        <td>PARIS-CDG</td>
        <td>11:45</td>
        <td>11:57</td>
        <td>LANDED AT 11:58</td>
      </tr>
      <tr>
        <th scope="row">BE 843</th>
        <td>BELFAST CITY</td>
        <td>11:45</td>
        <td>11:40</td>
        <td>LANDED AT 11:41</td>
      </tr>
      <tr class="dk">
        <th scope="row">GR 642</th>
        <td>GUERNSEY</td>
        <td>11:55</td>
        <td>11:38</td>
        <td>LANDED AT 11:37</td>
      </tr>
      <tr>
        <th scope="row">EZY 6192</th>
        <td>PISA</td>
        <td>12:05</td>
        <td>12:18</td>
        <td>LANDED AT 12:17</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6052</th>
        <td>MALAGA</td>
        <td>12:15</td>
        <td>11:55</td>
        <td>LANDED AT 11:55</td>
      </tr>
      <tr>
        <th scope="row">EZY 6074</th>
        <td>ALICANTE</td>
        <td>12:35</td>
        <td>12:12</td>
        <td>LANDED AT 12:14</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6068</th>
        <td>VALENCIA</td>
        <td>12:40</td>
        <td>12:49</td>
        <td>LANDED AT 12:48</td>
      </tr>
      <tr>
        <th scope="row">BA 4023</th>
        <td>GLASGOW</td>
        <td>12:50</td>
        <td>12:41</td>
        <td>LANDED AT 14:08</td>
      </tr>
      <tr class="dk">
        <th scope="row">FR 506</th>
        <td>DUBLIN</td>
        <td>13:00</td>
        <td>12:52</td>
        <td>LANDED AT 12:51</td>
      </tr>
      <tr>
        <th scope="row">EZY 6046</th>
        <td>PALMA</td>
        <td>13:20</td>
        <td>16:31</td>
        <td>LANDED AT 16:31</td>
      </tr>
      <tr class="dk">
        <th scope="row">EI 286</th>
        <td>DUBLIN</td>
        <td>13:40</td>
        <td>13:33</td>
        <td>LANDED AT 13:32</td>
      </tr>
      <tr>
        <th scope="row">EZY 6096</th>
        <td>BUDAPEST</td>
        <td>13:40</td>
        <td>13:38</td>
        <td>LANDED AT 13:40</td>
      </tr>
      <tr class="dk">
        <th scope="row">BE 152</th>
        <td>JERSEY</td>
        <td>13:50</td>
        <td>13:36</td>
        <td>LANDED AT 13:38</td>
      </tr>
      <tr>
        <th scope="row">BA 4122</th>
        <td>ZURICH</td>
        <td>13:55</td>
        <td>13:31</td>
        <td>LANDED AT 13:31</td>
      </tr>
      <tr class="dk">
        <th scope="row">T3 4505</th>
        <td>ABERDEEN</td>
        <td>14:10</td>
        <td>14:19</td>
        <td>LANDED AT 14:18</td>
      </tr>
      <tr>
        <th scope="row">WOW 304</th>
        <td>JERSEY</td>
        <td>14:10</td>
        <td>13:47</td>
        <td>LANDED AT 13:48</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 4565</th>
        <td>BERLIN-SCHOF</td>
        <td>14:50</td>
        <td>14:54</td>
        <td>LANDED AT 14:55</td>
      </tr>
      <tr>
        <th scope="row">BA 4085</th>
        <td>PARIS-CDG</td>
        <td>14:55</td>
        <td>14:42</td>
        <td>LANDED AT 14:43</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6116</th>
        <td>NICE</td>
        <td>15:15</td>
        <td>18:22</td>
        <td>LANDED AT 18:21</td>
      </tr>
      <tr>
        <th scope="row">KL 1053</th>
        <td>AMSTERDAM</td>
        <td>15:15</td>
        <td>14:57</td>
        <td>LANDED AT 14:57</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4039</th>
        <td>EDINBURGH</td>
        <td>15:25</td>
        <td>15:28</td>
        <td>LANDED AT 15:29</td>
      </tr>
      <tr>
        <th scope="row">EZY 6026</th>
        <td>BARCELONA</td>
        <td>15:30</td>
        <td>15:57</td>
        <td>LANDED AT 15:58</td>
      </tr>
      <tr class="dk">
        <th scope="row">MYT 792</th>
        <td>RHODES</td>
        <td>15:35</td>
        <td>15:13</td>
        <td>LANDED AT 15:14</td>
      </tr>
      <tr>
        <th scope="row">SN 2055</th>
        <td>BRUSSELS </td>
        <td>15:55</td>
        <td>15:35</td>
        <td>LANDED AT 15:36</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 396</th>
        <td>INVERNESS</td>
        <td>15:55</td>
        <td>15:56</td>
        <td>LANDED AT 15:56</td>
      </tr>
      <tr>
        <th scope="row">BE 1546</th>
        <td>TOULOUSE</td>
        <td>15:55</td>
        <td>15:26</td>
        <td>LANDED AT 15:26</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4028</th>
        <td>MUNICH</td>
        <td>16:00</td>
        <td>15:47</td>
        <td>LANDED AT 15:47</td>
      </tr>
      <tr>
        <th scope="row">BE 1562</th>
        <td>BORDEAUX</td>
        <td>16:05</td>
        <td>16:10</td>
        <td>LANDED AT 16:10</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6162</th>
        <td>AMSTERDAM</td>
        <td>16:05</td>
        <td>16:07</td>
        <td>LANDED AT 16:07</td>
      </tr>
      <tr>
        <th scope="row">FCA 7301</th>
        <td>F'VENTURA</td>
        <td>16:05</td>
        <td>15:38</td>
        <td>LANDED AT 15:39</td>
      </tr>
      <tr class="dk">
        <th scope="row">KL 1055</th>
        <td>AMSTERDAM</td>
        <td>16:20</td>
        <td>16:14</td>
        <td>LANDED AT 16:13</td>
      </tr>
      <tr>
        <th scope="row">BA 4027</th>
        <td>GLASGOW</td>
        <td>16:40</td>
        <td>16:28</td>
        <td>LANDED AT 16:29</td>
      </tr>
      <tr class="dk">
        <th scope="row">WOW 486</th>
        <td>DUBLIN</td>
        <td>16:50</td>
        <td>16:48</td>
        <td>LANDED AT 16:45</td>
      </tr>
      <tr>
        <th scope="row">WOW 305</th>
        <td>MANCHESTER</td>
        <td>17:00</td>
        <td>16:50</td>
        <td>LANDED AT 16:49</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 569</th>
        <td>NEWCASTLE</td>
        <td>17:15</td>
        <td>17:02</td>
        <td>LANDED AT 17:04</td>
      </tr>
      <tr>
        <th scope="row">BE 1596</th>
        <td>BERGERAC</td>
        <td>17:15</td>
        <td>17:00</td>
        <td>LANDED AT 17:00</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6156</th>
        <td>GENEVA</td>
        <td>17:20</td>
        <td>17:05</td>
        <td>LANDED AT 17:07</td>
      </tr>
      <tr>
        <th scope="row">BA 4035</th>
        <td>EDINBURGH</td>
        <td>17:40</td>
        <td>19:54</td>
        <td>LANDED AT 19:53</td>
      </tr>
      <tr class="dk">
        <th scope="row">XLA 6225</th>
        <td>RHODES</td>
        <td>18:10</td>
        <td>17:53</td>
        <td>LANDED AT 17:54</td>
      </tr>
      <tr>
        <th scope="row">EZY 406</th>
        <td>GLASGOW</td>
        <td>18:15</td>
        <td>19:41</td>
        <td>LANDED AT 19:41</td>
      </tr>
      <tr class="dk">
        <th scope="row">FCA 7303</th>
        <td>LARNACA</td>
        <td>18:30</td>
        <td>18:47</td>
        <td>LANDED AT 18:47</td>
      </tr>
      <tr>
        <th scope="row">T3 4507</th>
        <td>ABERDEEN</td>
        <td>18:35</td>
        <td>18:50</td>
        <td>LANDED AT 18:50</td>
      </tr>
      <tr class="dk">
        <th scope="row">FR 508</th>
        <td>DUBLIN</td>
        <td>18:40</td>
        <td>19:22</td>
        <td>LANDED AT 19:19</td>
      </tr>
      <tr>
        <th scope="row">BA 7644</th>
        <td>MILAN</td>
        <td>18:45</td>
        <td>18:53</td>
        <td>LANDED AT 18:53</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6174</th>
        <td>VENICE</td>
        <td>18:50</td>
        <td>19:34</td>
        <td>LANDED AT 19:33</td>
      </tr>
      <tr>
        <th scope="row">EZY 426</th>
        <td>EDINBURGH</td>
        <td>19:05</td>
        <td>19:58</td>
        <td>LANDED AT 19:59</td>
      </tr>
      <tr class="dk">
        <th scope="row">BY 514</th>
        <td>PAPHOS</td>
        <td>19:10</td>
        <td>18:45</td>
        <td>LANDED AT 18:43</td>
      </tr>
      <tr>
        <th scope="row">EZY 6128</th>
        <td>PRAGUE</td>
        <td>19:10</td>
        <td>19:16</td>
        <td>LANDED AT 19:15</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4089</th>
        <td>PARIS-CDG</td>
        <td>19:15</td>
        <td>19:38</td>
        <td>LANDED AT 19:38</td>
      </tr>
      <tr>
        <th scope="row">BA 4102</th>
        <td>FRANKFURT</td>
        <td>19:50</td>
        <td>19:36</td>
        <td>LANDED AT 19:36</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4029</th>
        <td>GLASGOW</td>
        <td>19:55</td>
        <td>19:49</td>
        <td>LANDED AT 19:48</td>
      </tr>
      <tr>
        <th scope="row">WOW 307</th>
        <td>MANCHESTER</td>
        <td>19:55</td>
        <td>19:56</td>
        <td>LANDED AT 19:56</td>
      </tr>
      <tr class="dk">
        <th scope="row">WOW 487</th>
        <td>LEEDS/BRAD</td>
        <td>20:00</td>
        <td>19:51</td>
        <td>LANDED AT 19:51</td>
      </tr>
      <tr>
        <th scope="row">KL 1057</th>
        <td>AMSTERDAM</td>
        <td>20:30</td>
        <td>20:21</td>
        <td>LANDED AT 20:21</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 573</th>
        <td>NEWCASTLE</td>
        <td>20:35</td>
        <td>20:22</td>
        <td>LANDED AT 20:24</td>
      </tr>
      <tr>
        <th scope="row">BA 4087</th>
        <td>PARIS-CDG</td>
        <td>20:35</td>
        <td>20:51</td>
        <td>LANDED AT 20:50</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 450</th>
        <td>BELFAST INTL</td>
        <td>21:00</td>
        <td>20:58</td>
        <td>LANDED AT 20:59</td>
      </tr>
     </tbody>
</table>
</div>
</div>
<p class="bold info">Method #2</p>
    <table class="tableone" summary="This table lists flights arriving at Bristol International Airport.">
      <caption>ARRIVALS TO BRISTOL - ENGLAND</caption>
      <thead>
        <tr>
          <th class="th1" scope="col">FLIGHT CODE</th> 
          <th class="th2" scope="col">FROM</th> 
          <th class="th3" scope="col">STA</th> 
          <th class="th4" scope="col">ETA</th> 
          <th class="th5" scope="col">Notes</th> 
        </tr>
      </thead>

      <tfoot>
        <tr>
          <td colspan="5">DATE : 19th OCTOBER 2005</td>
        </tr>
      </tfoot>
<tbody>
<tr><td colspan="5">
<div class="innerb">
	  <table class="tabletwo">
      <tbody><tr>
        <th class="td1" scope="row">T3 4264</th>
        <td class="td2">ISLE OF MAN</td>
        <td class="td3">11:40</td>
        <td class="td4">11:42</td>
        <td class="td5">LANDED AT 11:43</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4081</th>
        <td>PARIS-CDG</td>
        <td>11:45</td>
        <td>11:57</td>
        <td>LANDED AT 11:58</td>
      </tr>
      <tr>
        <th scope="row">BE 843</th>
        <td>BELFAST CITY</td>
        <td>11:45</td>
        <td>11:40</td>
        <td>LANDED AT 11:41</td>
      </tr>
      <tr class="dk">
        <th scope="row">GR 642</th>
        <td>GUERNSEY</td>
        <td>11:55</td>
        <td>11:38</td>
        <td>LANDED AT 11:37</td>
      </tr>
      <tr>
        <th scope="row">EZY 6192</th>
        <td>PISA</td>
        <td>12:05</td>
        <td>12:18</td>
        <td>LANDED AT 12:17</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6052</th>
        <td>MALAGA</td>
        <td>12:15</td>
        <td>11:55</td>
        <td>LANDED AT 11:55</td>
      </tr>
      <tr>
        <th scope="row">EZY 6074</th>
        <td>ALICANTE</td>
        <td>12:35</td>
        <td>12:12</td>
        <td>LANDED AT 12:14</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6068</th>
        <td>VALENCIA</td>
        <td>12:40</td>
        <td>12:49</td>
        <td>LANDED AT 12:48</td>
      </tr>
      <tr>
        <th scope="row">BA 4023</th>
        <td>GLASGOW</td>
        <td>12:50</td>
        <td>12:41</td>
        <td>LANDED AT 14:08</td>
      </tr>
      <tr class="dk">
        <th scope="row">FR 506</th>
        <td>DUBLIN</td>
        <td>13:00</td>
        <td>12:52</td>
        <td>LANDED AT 12:51</td>
      </tr>
      <tr>
        <th scope="row">EZY 6046</th>
        <td>PALMA</td>
        <td>13:20</td>
        <td>16:31</td>
        <td>LANDED AT 16:31</td>
      </tr>
      <tr class="dk">
        <th scope="row">EI 286</th>
        <td>DUBLIN</td>
        <td>13:40</td>
        <td>13:33</td>
        <td>LANDED AT 13:32</td>
      </tr>
      <tr>
        <th scope="row">EZY 6096</th>
        <td>BUDAPEST</td>
        <td>13:40</td>
        <td>13:38</td>
        <td>LANDED AT 13:40</td>
      </tr>
      <tr class="dk">
        <th scope="row">BE 152</th>
        <td>JERSEY</td>
        <td>13:50</td>
        <td>13:36</td>
        <td>LANDED AT 13:38</td>
      </tr>
      <tr>
        <th scope="row">BA 4122</th>
        <td>ZURICH</td>
        <td>13:55</td>
        <td>13:31</td>
        <td>LANDED AT 13:31</td>
      </tr>
      <tr class="dk">
        <th scope="row">T3 4505</th>
        <td>ABERDEEN</td>
        <td>14:10</td>
        <td>14:19</td>
        <td>LANDED AT 14:18</td>
      </tr>
      <tr>
        <th scope="row">WOW 304</th>
        <td>JERSEY</td>
        <td>14:10</td>
        <td>13:47</td>
        <td>LANDED AT 13:48</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 4565</th>
        <td>BERLIN-SCHOF</td>
        <td>14:50</td>
        <td>14:54</td>
        <td>LANDED AT 14:55</td>
      </tr>
      <tr>
        <th scope="row">BA 4085</th>
        <td>PARIS-CDG</td>
        <td>14:55</td>
        <td>14:42</td>
        <td>LANDED AT 14:43</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6116</th>
        <td>NICE</td>
        <td>15:15</td>
        <td>18:22</td>
        <td>LANDED AT 18:21</td>
      </tr>
      <tr>
        <th scope="row">KL 1053</th>
        <td>AMSTERDAM</td>
        <td>15:15</td>
        <td>14:57</td>
        <td>LANDED AT 14:57</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4039</th>
        <td>EDINBURGH</td>
        <td>15:25</td>
        <td>15:28</td>
        <td>LANDED AT 15:29</td>
      </tr>
      <tr>
        <th scope="row">EZY 6026</th>
        <td>BARCELONA</td>
        <td>15:30</td>
        <td>15:57</td>
        <td>LANDED AT 15:58</td>
      </tr>
      <tr class="dk">
        <th scope="row">MYT 792</th>
        <td>RHODES</td>
        <td>15:35</td>
        <td>15:13</td>
        <td>LANDED AT 15:14</td>
      </tr>
      <tr>
        <th scope="row">SN 2055</th>
        <td>BRUSSELS </td>
        <td>15:55</td>
        <td>15:35</td>
        <td>LANDED AT 15:36</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 396</th>
        <td>INVERNESS</td>
        <td>15:55</td>
        <td>15:56</td>
        <td>LANDED AT 15:56</td>
      </tr>
      <tr>
        <th scope="row">BE 1546</th>
        <td>TOULOUSE</td>
        <td>15:55</td>
        <td>15:26</td>
        <td>LANDED AT 15:26</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4028</th>
        <td>MUNICH</td>
        <td>16:00</td>
        <td>15:47</td>
        <td>LANDED AT 15:47</td>
      </tr>
      <tr>
        <th scope="row">BE 1562</th>
        <td>BORDEAUX</td>
        <td>16:05</td>
        <td>16:10</td>
        <td>LANDED AT 16:10</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6162</th>
        <td>AMSTERDAM</td>
        <td>16:05</td>
        <td>16:07</td>
        <td>LANDED AT 16:07</td>
      </tr>
      <tr>
        <th scope="row">FCA 7301</th>
        <td>F'VENTURA</td>
        <td>16:05</td>
        <td>15:38</td>
        <td>LANDED AT 15:39</td>
      </tr>
      <tr class="dk">
        <th scope="row">KL 1055</th>
        <td>AMSTERDAM</td>
        <td>16:20</td>
        <td>16:14</td>
        <td>LANDED AT 16:13</td>
      </tr>
      <tr>
        <th scope="row">BA 4027</th>
        <td>GLASGOW</td>
        <td>16:40</td>
        <td>16:28</td>
        <td>LANDED AT 16:29</td>
      </tr>
      <tr class="dk">
        <th scope="row">WOW 486</th>
        <td>DUBLIN</td>
        <td>16:50</td>
        <td>16:48</td>
        <td>LANDED AT 16:45</td>
      </tr>
      <tr>
        <th scope="row">WOW 305</th>
        <td>MANCHESTER</td>
        <td>17:00</td>
        <td>16:50</td>
        <td>LANDED AT 16:49</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 569</th>
        <td>NEWCASTLE</td>
        <td>17:15</td>
        <td>17:02</td>
        <td>LANDED AT 17:04</td>
      </tr>
      <tr>
        <th scope="row">BE 1596</th>
        <td>BERGERAC</td>
        <td>17:15</td>
        <td>17:00</td>
        <td>LANDED AT 17:00</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6156</th>
        <td>GENEVA</td>
        <td>17:20</td>
        <td>17:05</td>
        <td>LANDED AT 17:07</td>
      </tr>
      <tr>
        <th scope="row">BA 4035</th>
        <td>EDINBURGH</td>
        <td>17:40</td>
        <td>19:54</td>
        <td>LANDED AT 19:53</td>
      </tr>
      <tr class="dk">
        <th scope="row">XLA 6225</th>
        <td>RHODES</td>
        <td>18:10</td>
        <td>17:53</td>
        <td>LANDED AT 17:54</td>
      </tr>
      <tr>
        <th scope="row">EZY 406</th>
        <td>GLASGOW</td>
        <td>18:15</td>
        <td>19:41</td>
        <td>LANDED AT 19:41</td>
      </tr>
      <tr class="dk">
        <th scope="row">FCA 7303</th>
        <td>LARNACA</td>
        <td>18:30</td>
        <td>18:47</td>
        <td>LANDED AT 18:47</td>
      </tr>
      <tr>
        <th scope="row">T3 4507</th>
        <td>ABERDEEN</td>
        <td>18:35</td>
        <td>18:50</td>
        <td>LANDED AT 18:50</td>
      </tr>
      <tr class="dk">
        <th scope="row">FR 508</th>
        <td>DUBLIN</td>
        <td>18:40</td>
        <td>19:22</td>
        <td>LANDED AT 19:19</td>
      </tr>
      <tr>
        <th scope="row">BA 7644</th>
        <td>MILAN</td>
        <td>18:45</td>
        <td>18:53</td>
        <td>LANDED AT 18:53</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 6174</th>
        <td>VENICE</td>
        <td>18:50</td>
        <td>19:34</td>
        <td>LANDED AT 19:33</td>
      </tr>
      <tr>
        <th scope="row">EZY 426</th>
        <td>EDINBURGH</td>
        <td>19:05</td>
        <td>19:58</td>
        <td>LANDED AT 19:59</td>
      </tr>
      <tr class="dk">
        <th scope="row">BY 514</th>
        <td>PAPHOS</td>
        <td>19:10</td>
        <td>18:45</td>
        <td>LANDED AT 18:43</td>
      </tr>
      <tr>
        <th scope="row">EZY 6128</th>
        <td>PRAGUE</td>
        <td>19:10</td>
        <td>19:16</td>
        <td>LANDED AT 19:15</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4089</th>
        <td>PARIS-CDG</td>
        <td>19:15</td>
        <td>19:38</td>
        <td>LANDED AT 19:38</td>
      </tr>
      <tr>
        <th scope="row">BA 4102</th>
        <td>FRANKFURT</td>
        <td>19:50</td>
        <td>19:36</td>
        <td>LANDED AT 19:36</td>
      </tr>
      <tr class="dk">
        <th scope="row">BA 4029</th>
        <td>GLASGOW</td>
        <td>19:55</td>
        <td>19:49</td>
        <td>LANDED AT 19:48</td>
      </tr>
      <tr>
        <th scope="row">WOW 307</th>
        <td>MANCHESTER</td>
        <td>19:55</td>
        <td>19:56</td>
        <td>LANDED AT 19:56</td>
      </tr>
      <tr class="dk">
        <th scope="row">WOW 487</th>
        <td>LEEDS/BRAD</td>
        <td>20:00</td>
        <td>19:51</td>
        <td>LANDED AT 19:51</td>
      </tr>
      <tr>
        <th scope="row">KL 1057</th>
        <td>AMSTERDAM</td>
        <td>20:30</td>
        <td>20:21</td>
        <td>LANDED AT 20:21</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 573</th>
        <td>NEWCASTLE</td>
        <td>20:35</td>
        <td>20:22</td>
        <td>LANDED AT 20:24</td>
      </tr>
      <tr>
        <th scope="row">BA 4087</th>
        <td>PARIS-CDG</td>
        <td>20:35</td>
        <td>20:51</td>
        <td>LANDED AT 20:50</td>
      </tr>
      <tr class="dk">
        <th scope="row">EZY 450</th>
        <td>BELFAST INTL</td>
        <td>21:00</td>
        <td>20:58</td>
        <td>LANDED AT 20:59</td>
      </tr>
</tbody></table>
</div>
</td></tr>
</tbody>
</table>




</div> <!-- end of info -->
<div id="info_right">
<div class="box250">
<h3>Support CSS play</h3>
<div style="border-style: solid; border-color: rgb(221, 221, 221); border-width: 0pt 1px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 248px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; text-align: center;">
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<div>
<input name="cmd" value="_s-xclick" type="hidden">
<input name="hosted_button_id" value="3206316" type="hidden">
<input src="tablescroll_files/paypal2.png" name="submit" alt="PayPal - The safer, easier way to pay online." type="image">
<img alt="" src="tablescroll_files/pixel.gif" width="1" height="1">
</div>
</form>
</div>
<p>Help keep CSS play up and running</p>
</div><div class="box250">
<h3>CSS play recommend</h3>
<p>
<a class="bannerad" href="http://www.dynamicdrive.com/style/"><img src="tablescroll_files/dynamicdrive.gif" alt="Free, practical CSS menus, layouts, and examples" title="Free, practical CSS menus, layouts, and examples" width="220" height="100"></a><a class="bannerad" href="http://www.psd2html.com/order-now.html" title="PSD to HTML"><img src="tablescroll_files/220x100.jpg" alt="PSD to HTML" title="PSD to HTML" width="220" height="100"></a><a class="bannerad" href="http://www.netklix.com/?nxtc=1097415" title="Earn from your site today with Netklix text ads"><img src="tablescroll_files/220x100c-pub.gif" alt="Earn from your site today with Netklix text ads" title="Earn from your site today with Netklix text ads" width="220" height="100"></a><a class="bannerad" href="http://www.medialab.com/sitegrinder/?utm_source=CSSPlayAll&amp;utm_medium=banner&amp;utm_campaign=SG2"><img src="tablescroll_files/sg2_220x100_200810.jpg" alt="Sitegrinder" title="Sitegrinder - Photoshop plug-in converts designs to fully valid CSS websites" width="220" height="100"></a></p>
<b class="clear"></b>

</div><div class="box250">
<h3>CSS play Recommend</h3>
<ul class="cssplay">
<li><a href="http://www.completemyspace.com/">Myspace layouts and counter</a><br><span class="text">Lyrics, polls, images &amp; backgrounds -Free!</span></li><li><a href="http://www.all-phuket.com/">Phuket guide</a><br><span class="text">A complete guide to Phuket</span></li><li><a href="http://www.hostcolor.com/vps">VPS Hosting</a><br><span class="text">Virtuozzo VPS Hosting - $19.95/mo
</span></li><li><a href="http://www.adido-solutions.com/">Web design in Dorset</a><br><span class="text">Bournmouth based web design agency</span></li><li><a href="http://www.pretronics.co.uk/">Pretronics UK</a><br><span class="text">Pre Press Servicing</span></li><li><a href="http://www.ahosting.biz/">Web hosting, dedicated servers</a><br><span class="text">Web reseller, managed servers</span></li><li><a href="http://www.thai.se/">www.thai.se</a><br><span class="text">Thailand guide</span></li></ul>
</div><div class="plain250">
<div>
<br>
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 200x200, created 2/11/09 */
google_ad_slot = "0691033966";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript" src="tablescroll_files/show_ads.js">
</script><script src="tablescroll_files/expansion_embed.js"></script><script src="tablescroll_files/test_domain.js"></script><script>window.google_render_ad();</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 200px; position: relative; visibility: visible; width: 200px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 200px; position: relative; visibility: visible; width: 200px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame1" marginheight="0" marginwidth="0" name="google_ads_frame" src="tablescroll_files/ads.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="200" frameborder="0" height="200"></iframe></ins></ins>
</div>
</div></div>

<div id="content">
<div class="plain752">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 728x90, created 3/24/09 */
google_ad_slot = "2160454816";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="tablescroll_files/show_ads.js">
</script><script>window.google_render_ad();</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 90px; position: relative; visibility: visible; width: 728px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 90px; position: relative; visibility: visible; width: 728px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame2" marginheight="0" marginwidth="0" name="google_ads_frame" src="tablescroll_files/ads_002.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="728" frameborder="0" height="90"></iframe></ins></ins>
</div>


<div id="left_column">
<h3>Information</h3>

<p>If you have a lot of table data but not much room to display it, then this might be the answer.</p>
<p>A css only styled table with fixed column headings and footer and scrolling content.</p>

<p class="bold">Method #1</p>
<p>This uses two outer containing divs and a single table.</p>
<p>Internet Explorer has a scrolling 'caption' whereas Firefox has this fixed along with the column headings.</p>
<p>Opera fails at the moment but I am still working on it.</p>
<p class="bold">Method #2</p>
<p>This uses two nested tables with a containing div and works in IE, FF and Opera.</p>
<div>
<br>
<div class="plain470">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
/* 468x60, created 3/20/09 */
google_ad_slot = "7558797043";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="tablescroll_files/show_ads.js">
</script><script>window.google_render_ad();</script><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: inline-table; height: 60px; position: relative; visibility: visible; width: 468px;"><ins style="border: medium none ; margin: 0pt; padding: 0pt; display: block; height: 60px; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" hspace="0" id="google_ads_frame3" marginheight="0" marginwidth="0" name="google_ads_frame" src="tablescroll_files/ads_003.htm" style="left: 0pt; position: absolute; top: 0pt;" vspace="0" scrolling="no" width="468" frameborder="0" height="60"></iframe></ins></ins>
</div>
<br><br>
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al_s";
google_ad_channel = "";
google_color_border = "f8f8f8";
google_color_bg = "f8f8f8";
google_color_link = "004488";
google_color_text = "666666";
google_color_url = "cc0000";
//-->
</script>
<script type="text/javascript" src="tablescroll_files/show_ads.js">
</script><script>window.google_render_ad();</script><iframe name="google_ads_frame" src="tablescroll_files/ads_004.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" width="468" frameborder="0" height="15"></iframe>
</div>

<h3>Copyright</h3><p>You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to <b class="css">CSS</b><span class="play">play</span> is always appreciated.</p><p>Commercial
usage is also permitted without seeking approval, but I would ask that
a donation is considered to support my work on CSSPlay.</p>
<p>If you are having problems integrating any of my demonstrations into
your website then I now offer a service to fault find and correct any
errors that you may have introduced. Please email me for more
information.</p><br>

</div>


<div id="right_column">
<br>
<div class="box250">
<h3>Testimonial</h3>
<p>"The <a href="http://www.citroen.co.uk/"><img src="tablescroll_files/citroenlogo.gif" alt="citroen.co.uk"></a> web site uses<br>CSS play code for the site drop down menus.<br>This code works seamlessly in IE 6 &amp; 7, and is an excellent solution to the Creative requirements of the site."<br><br>
Damon Clark - Brandwidth</p>
</div>
<div class="box250">
<h3>CSS play pages</h3>
<ul>
<li><a href="http://www.cssplay.co.uk/favicon_ads.html">Favicon Advertising</a></li>
<li><a href="http://www.cssplay.co.uk/banner_ads.html">Half Banner Advertising</a></li>
<li><a href="http://www.cssplay.co.uk/ads_page.html">Advertising rates</a></li>
<li><a href="http://www.cssplay.co.uk/service.html">Web design &amp; assistance</a></li>
<li><a href="http://www.cssmenus.co.uk/"><b>CSS</b> Menus - NEW website!</a></li>
<li><br><a href="http://web.top.org/css/" title="CSS (Design) - TOP.ORG"><img style="border: medium none ;" src="tablescroll_files/toporg_1667.gif" alt="CSS (Design) - TOP.ORG"></a></li>
</ul>
</div>

</div> <!-- end of right column -->
</div> <!-- end of content -->



	<div id="foot">
		<p>© 2005/6/7/8/9 stu nicholls - cssplay.co.uk - all rights reserved</p>
		<ul>
		<li><a href="http://www.icra.org/sitelabel/">ICRA checked site</a></li>
		<li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict!">xhtml 1.0 Strict</a></li>
		<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/menu/tablescroll.html" title="Valid CSS!">css 1/2/3</a></li>
		</ul>
		</div>
	</div> <!-- end of wrapper -->

<script src="tablescroll_files/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body></html>